<template>
    <el-menu
      class="categories"
      :default-active="'/myMall'"
      router
      background-color="white"
      text-color="#222"
      active-text-color="red">
      <el-menu-item v-for="(item,i) in navList" :key="i" :index="item.name">
        <i class="el-icon-menu"></i>      
        {{ item.navItem }}
      </el-menu-item>
    </el-menu>
</template>

<script>
  export default {
    name: 'MallSideMenu',
    data () {
      return {
        navList: [
          {name: '/myMall', navItem: '我的商店'},
          {name: '/addGoods' , navItem: '添加商品'},
          {name: '/mallOredr', navItem: '订单管理'},
          {name: '/mallMessage', navItem: '店铺信息'},
        ]
      }
    }
  }
</script>

<style scoped>
 .categories {
   position: fixed;
   margin-left: 50%;
   left: -700px;
   top: 150px;
   width: 150px;
 }
</style>
